<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>创建课程</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
	</head>

	<body>

		<div class="layui-fluid">
			<div class="layui-row" id="app">
				<form class="layui-form" enctype="multipart/form-data">
					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>课程名称</label>
						<div class="layui-input-inline">
							<input type="text" id="courseName" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>专业分类
                        </label>
						<div class="layui-input-inline">
							<select id="parentId" name="parentId" class="valid" lay-filter="parentId">
								<option value="-1">请选择</option>
								<option v-for="sub in subject" :value="sub.subjectId">{{ sub.subjectName }}</option>
							</select>
							<select id="subjectId" name="subjectId" class="valid" lay-filter="subjectId">
							</select>
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>状态
                        </label>
						<div class="layui-input-inline">
							<select id="isAvaliable" class="valid">
								<option value="1">上架</option>
								<option value="2">下架</option>
							</select>
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>总课时</label>
						<div class="layui-input-inline">
							<input type="number" id="lessionNum" min=0 lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>课程原价</label>
						<div class="layui-input-inline">
							<input type="number" id="sourcePrice" min=0 lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>课程售价</label>
						<div class="layui-input-inline">
							<input type="number" id="currentPrice" lay-verify="required" min=0 placeholder="为0表示免费" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>添加教师</label>
						<div class="layui-input-inline">
							<table id="tb"></table><br />
							<a href="#" id="checkTeaid" @click="check_tea" >选择教师</a>
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>销售数量</label>
						<div class="layui-input-inline">
							<input type="number" id="pageBuycount" min=0 lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>浏览量</label>
						<div class="layui-input-inline">
							<input type="number" id="pageViewcount" min=0 lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label for="username" class="layui-form-label">
                           <span class="x-red">*</span>有效结束日期</label>
						<div class="layui-input-inline">
							<input type="text" id="endTime" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label   class="layui-form-label">
                            <span class="x-red">*</span>课程简介</label>
						<div class="layui-input-inline">
							<input type="text" id="title" lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					
					<!--隐藏输入框 用来存放上传后图片路径-->
					<input id="credential_hide" name="credentialOne" type="text" lay-verify="credentialOne"
       					autocomplete="off" class="layui-input">
					<!--隐藏按钮 上传-->
					<button id="upload_img" type="button" hidden></button>
					<button class="layui-btn" id="preview_img" type="button">
						上传图片
					</button>
					<!--折叠面板-->
					<div class="layui-collapse" lay-accordion="" style="width: 399.5px">
					    <div class="layui-colla-item">
					        <h2 class="layui-colla-title">展开图片</h2>
					        <div class="layui-colla-content" id="colla_img" style="">
					        </div>
					    </div>
					</div>


					<div class="layui-form-item layui-form-text">
						<label for="desc" class="layui-form-label">课程详情</label>
						 <div class="layui-form-item layui-form-text">
						 	<textarea id="demo" name="testContent" class="layui-textarea" lay-verify="content"></textarea>
						</div>
					</div>

					<div class="layui-form-item">
						<label for="L_repass" class="layui-form-label"></label>
						<button class="layui-btn" lay-filter="add" type="button" lay-submit="">添加</button>
					</div>
				</form>
			</div>
		</div>

		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script src="./js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script>
			function del(obj) {
				var tr = obj.parentNode.parentNode;
				var tbody = tr.parentNode;
				tbody.removeChild(tr);
			}

			const app = new Vue({
				el: "#app",
				data: {
					tea: [],
					subject: [],
					checkSel: "0",
					cName: ''
				},
				methods: {
					check_tea() {
						xadmin.open('选择教师', 'course_teacher.html');
					},
					loading (){
						let _this = this;
						axios.get("http://localhost:9095/admin/sysSubject/getSubject").then(function(response) {
							_this.subject = response.data.data;
							console.log(response.data.data);
						});
					}
				},
				created() {
					this.loading()
				}
			})
			

			layui.use(['form', 'layer', 'upload', 'element', 'laydate', 'layedit'],
				function() {
					$ = layui.jquery;
					var form = layui.form,
						layer = layui.layer,
						upload = layui.upload,
						element = layui.element,
						laydate = layui.laydate,
						layedit = layui.layedit;
						
						var index =  layedit.build('demo');
						form.verify({
						    content:function () {
						        layedit.sync(index)
						    }
						});
						
					form.on("select(parentId)", function(data) {
						var areaId = data.elem.value;
						if (areaId!=-1){
							$.ajax({
								type: 'get',
								url: "http://localhost:9095/admin/sysSubject/selectParentId",
								data: {
									"subjectId": areaId
								},
								dataType: 'json',
								success: function(e) {
									console.log(e.data);
									//empty() 方法从被选元素移除所有内容
									$("select[name='subjectId']").empty();
									var html = "";
									$(e.data).each(function(v, k) {
										html += "<option value='" + k.subjectId + "'>" + k.subjectName + "</option>";
									});
									//把遍历的数据放到select表里面
									$("select[name='subjectId']").append(html);
									//从新刷新了一下下拉框
									form.render('select'); //重新渲染
								}
							});
						}
					});
					
					
					/*上传图片*/
				    upload.render({
				        elem: '#preview_img',
				        url: 'http://localhost:9095/admin/eduCourse/saveImg',
				        size: 10240,
				        auto: true,//不自动上传
				        bindAction: '#upload_img',//上传绑定到隐藏按钮
				        done: function (res) {
				        	console.log(res);
				            $('#credential_hide').val(res.data.name); //隐藏输入框赋值
				        }, 
				        error: function (index, upload) {
				            layer.msg('上传失败！' + index, {icon: 5});
				        },
				        before: function (obj) {
						    obj.preview(function (index, file, result, msg) {
						        $('#colla_img').find('img').remove();
						        $('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="' + result + '" width="370px"></a>');
						    })
						}
				    }); 
				    

					//监听提交
					form.on('submit(add)',
						function(data) {
							axios.defaults.headers.common["token2"] = $.cookie("token2");
							//单击隐藏的上传按钮
							var tid = '';
							$("#tb").find("tr").each(function() {　　
								//第二列单元格的值eq(索引)
								tid += $(this).children('td:eq(0)').text()+",";
							});
							if($("#parentId option:selected").val()==-1){
								layer.msg('请选择专业!');
								return;
							}
							if (tid==''){
								layer.msg('请为课程添加教师!');
								return;
							}
							if ($("#credential_hide").val()==''){
								layer.msg('请为课程添加logo!');
								return;
							}
							if ($("#currentPrice").val()>$("#sourcePrice").val()){
								layer.msg("售价大于原价？？不合理吧？");
								return;
							}
							if ($("#demo").val()==''){
								layer.msg("请填写课程详情！");
								return;
							}
							console.log($("#demo").val());
							var eduCourseDto = new URLSearchParams();
							eduCourseDto.append("courseName",$("#courseName").val());
							eduCourseDto.append("isAvaliable", $("#isAvaliable option:selected").val());
							eduCourseDto.append("subjectLink", $("#parentId option:selected").val())
							eduCourseDto.append("subjectId", $("#subjectId option:selected").val());
							eduCourseDto.append("sourcePrice", $("#sourcePrice").val());
							eduCourseDto.append("currentPrice", $("#currentPrice").val());
							eduCourseDto.append("title", $("#title").val());
							eduCourseDto.append("context", $("#demo").val());
							eduCourseDto.append("lessionNum", $("#lessionNum").val());
							eduCourseDto.append("pageBuycount", $("#pageBuycount").val());
							eduCourseDto.append("pageViewcount", $("#pageViewcount").val());
							eduCourseDto.append("endTime", $("#endTime").val());
							eduCourseDto.append("logo", $("#credential_hide").val());
							eduCourseDto.append("tid", tid)
							axios({
								method: "post",
								url: "http://localhost:9095/admin/eduCourse/saveEduCourse",
								headers:{
									'Content-Type':'application/x-www-form-urlencoded'
								},
								params: eduCourseDto
							}).then(function(response){
								if (response.data.code==200){
									layer.msg(response.data.message, {
											icon: 1,
											time: 1000
										});
									location.href = "course_show.html";
								} else if (response.data.code == 10101){
									layer.msg(response.data.message, {
											icon: 1,
											time: 1000
										});
										return false;
								} else {
									alert("课程添加失败,请联系管理员！");
								}
							})
						});
						
					laydate.render({
			            elem: '#endTime',
			            type: 'datetime',
			            min: minDate()
			        });
			        
			        // 设置可选日期
			        function minDate() {
			            var now = new Date();
			            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
			        }
					form.render();
				});
		</script>
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>

	</body>

</html>